<!--contact us-->
<template>
  <div class="contact">
    <div class="pad-btm">
      <!--Our Offices-->
      <section  class="box-border box-pd">
        <header>
          <h2 class="h2">{{$t('m.OurOffices')}}</h2>
        </header>
        <div class="map-box moblie-flex-column">
          <div class="map-items">
            <div class="map-item">
              <img src="../../../static/2B8965FB974669F9606B3212D8584B37.png" alt=''/>
            </div>
            <div class="map-item">
              <h4 style=" text-align: left;">{{$t('m.SINGAPORE')}}</h4>
              <p>21 Woodlans Cose,<br>#08-18, Primz Bizhub, 737854</p>
            </div>
          </div>
          <div class="map-items" style="margin-left:50px;">
            <div class="map-item">
              <img src="../../../static/6030BA47906F2046FE0136AA495CD90D.png" alt=''/>
            </div>
            <div class="map-item">
              <h4 style=" text-align: left;">{{$t('m.MYANMAR')}}</h4>
              <p>132A, 5th Floor B,<br>Bagayar Road, Sanchaung,<br>Yangon.</p>
            </div>
          </div>
        </div>
      </section>
      <!--Contact Us-->
      <section  class="box-pd">
        <header>
          <div name="contact"><h2 class="h2">{{$t('m.ContactUs')}}</h2></div>
        </header>
        <div class="other-contacts">
          <a>
            <i class="contact-i"><img src="../../../static/contact-us.png" alt=""></i>
            09 967 611 168  |  09 951 203 008
          </a>
          <a href="mailto:support@bestproperty.com.sg">
            <i class="contact-i"><img src="../../../static/contact-us1.png" alt=""></i>
            support@bestproperty.com.sg
          </a>
        </div>
      </section>
    </div>
    <div class="index-footer-box">
      <div class="index-footer">
        <router-link to="/businessClass" class="footer-items">
          <h3>{{$t('m.Products')}}</h3>
          <p>{{$t('m.AgentDeveloperHostellandlord')}}</p>
        </router-link>
        <router-link to="/contact" class="footer-items">
          <h3>{{$t('m.Aboutus')}}</h3>
          <p>{{$t('m.Contact')}}</p>
        </router-link>
        <a href="https://www.facebook.com/bestpropertymyanmar" target="_blank" onclick="ga('send', 'event','Facebook','click','https://www.facebook.com/')" class="footer-items">
          <h3>{{$t('m.Followus')}}</h3>
          <p>Facebook</p>
        </a>
        <p class="pte-ltd">2017 &copy; Bestproperty Pte Ltd.</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'contact',
  }
</script>
<style>
  .contact{
    font-size: 16px;
  }
  .contact a{
    cursor: pointer;
    text-decoration: none;
    color: #2c3e50;
  }
  .contact .box-border {
    border-bottom: 1px solid #e0e0e0 !important
  }
  .contact .box-pd {
    padding: 3em 0
  }
  .contact .box-pd .h2 {
    margin: 0 0 .5em;
    color: #f60;
    text-align: center;
    letter-spacing: -.015em;
    font-weight: 700;
    font-size: 2em
  }
  .contact .map-box {
    display: flex;
    box-sizing: border-box;
    margin: 2em 15% 0;
    flex-wrap: wrap;
    justify-content:center;
  }
  .contact .map-items {
    display: flex;
    justify-content:center;
    margin: 1em 0;
    width:40%;
    /*height: 260px;*/
  }
  .contact .map-item {
    box-sizing: content-box;
    padding: 0 1.5em 0 0;
    flex: 1
  }
  .contact .map-item img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .contact .map-item h4 {
    margin: 0 0 .75em;
    color: #3e3e3e;
    font-weight: 700;
    font-size: 13pt
  }
  .contact .map-item p {
    font-size: 16px;
    color:rgb(153, 153, 153);
  }
  .contact .other-contacts {
    padding: 1em 0;
    text-align: center
  }
  .contact .other-contacts a {
    position: relative;
    display: inline-block;
    margin-left: 1.5em;
    padding-left: 4.5em;
    height: 55px;
    color:rgb(57, 158, 248);
    line-height: 55px
  }
  .contact .other-contacts .contact-i{
    width: 55px;
    height: 55px;
    position: absolute;
    left: 0;
    top:0;
  }
  .contact .other-contacts .contact-i img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .contact .index-footer-box{
    background: rgb(242, 242, 242);
  }
  .contact .index-footer{
    padding:2em 0;
    width: 75%;
    margin:0 auto;
  }
  .contact .index-footer h3{
    margin:0;
    font-size: 1.05em;
  }
  .contact .index-footer p{
    margin: .5em 0;
    font-size: 0.9em;
  }
  .contact .index-footer .footer-items{
    display: inline-block;
    min-width: 220px;
    margin-right: 1.5em;
  }
  .contact .index-footer .pte-ltd{
    margin: 3.5em 0 0 0;
  }
  .pad-btm{
    padding-bottom:182px;
  }
  .contact .index-footer-box{
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
  }
</style>
